<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>
<script src="./lodash.js"></script>
<script>
// 英文：
  // FYI（仅供参考）：For Your Information
  // assign：分配、委托、赋予
  // mixin：混入

// 对象的“继承”  
  // 继承的目的：  为了 代码的 复用。
  // 备注：前端的常规(初级)开发，大概率是不会用 class / 构造函数
    // 但，前端开发，最常用的是 「对象」，因为 JS 能非常方便地通过 字面量的形式，声明对象。

const defaults = {
  name: '佚名',
  home: '位置',
  write() {
    console.log('我写了一本书', this);
  },
  child: {
    name: '小小小明'
  }
}

const chinese = {
  nation: '中国',
  race: '黄种人'
}

// 写法1：实现 对象的 复用（继承）
  // 原理：利用 ... 运算符，展开 defaults 相关的属性
  // const ming = {
  //   ...defaults, // 即小明，继承了 defaults 对象的属性和方法
  //   name: '小明' // “多态”，本质 用新的 key 覆盖 defaults 的同名 key
  // }


// 写法2：实现 对象的 复用（继承）
  // 作用：result 方便、快捷地 拿到了(复用了)chinese, defaults的属性和方法
  // 本质和 写法1：实现 对象的 复用（继承） 没有任何区别
const xiaoHuang = Object.assign({}, chinese, defaults, {name: '小黄'});
// console.log(xiaoHuang);

// 用写法1，改写上面的 Object.assign：
const xiaoLv = {
  ...chinese,
  ...defaults,
  // ...{name: '小黄'}
  name: '小L V'
};
// console.log(xiaoLv);

// 注：写法1 + 写法2：通过 浅拷贝 实现的 继承

// 写法3：对象的继承（又叫 对象的“合并”） ->  通过 深拷贝
  // _.merge
const dior = _.merge({},  chinese, defaults, {name: 'Dior'});


// -----------------------------------
// 总结：对象本身的 继承，在 前端开发中，更常用
  // 常用的方法，本质逻辑为：多个 对象「合并」到一起，以实现 “默认对象” 的属性和方法的复用
    // 其 「合并」在英文当，可以叫 assign / merge / mixin
      // 注：「合并」 是一种 「思想」。
</script>